<!--

  多选|单选

  // 带*号表示必填属性
  props: 
    *data:(Array)       选项数据
        [
          "":(String)   选项
        ]
    type:(String)       控制类型为多选还是单选，默认多选    "multiple"：多选  "single"：单选

  slot: 

  event: 
    confirm             确认触发事件  返回选中的选项
    cancel              取消触发事件  返回选中的选项

  demo: 
    <qm-multiple-choice
      key="choice1"
      @confirm="getResult"
      @cancel="cancel"
      :data="data"
      type="multiple"
    ></qm-multiple-choice>

    data(){
      return {
        data: [
          "简介",
          "排课管理",
          "班委名单",
          "教学材料",
          "培训成果",
          "教学质量",
          "师资管理",
          "证书管理",
          "班级经费",
        ],
        ...
      }
    }

-->



<template>
  <div class="qm-multiple-choice">
    <ul>
      <li :class="{ active: result.indexOf(index) !== -1 }" v-for="(item, index) in data" :key="index"
        @click="select(index)">
        <span>{{ item }}</span>
      </li>
    </ul>
    <f7-row class="btn-box" v-if="type === 'multiple'">
      <f7-col>
        <f7-button class="cancel" text="取消" round outline @click="cancel"></f7-button>
      </f7-col>
      <f7-col>
        <f7-button text="确定" round fill @click="confirm"></f7-button>
      </f7-col>
    </f7-row>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array
    },
    type: {
      type: String,
      default: (value) => {
        if (["multiple", "single"].indexOf(value) !== -1) {
          return value;
        }
        return "multiple";
      }
    }
  },
  data() {
    return {
      result: [],
    };
  },
  methods: {
    select(index) {
      if (this.type === "multiple") {

        let indexOf = this.result.indexOf(index);
        if (indexOf === -1) {
          this.result.push(index);
          this.result.sort();
          return;
        }
        this.result.splice(indexOf, 1);
        return;
      } else {
        this.result = [index];
        this.confirm();
      }
    },
    confirm() {
      let r = [];
      this.result.forEach((item) => {
        r.push(this.data[item]);
      });
      this.$emit("confirm", r);
    },
    cancel() {
      this.result = [];
      this.$emit("cancel");
      this.confirm();
    }
  },
};
</script>

<style lang="less" scoped>
.qm-multiple-choice {
  width: 100%;

  ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: calc(30px * var(--ratio));

    li {
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(80px * var(--ratio));
      list-style: none;
      text-align: center;
      background: #f5f7fa;
      border-radius: calc(8px * var(--ratio));
      overflow: hidden;

      span {
        color: var(--color-text-title);
        font-size: var(--font-size-subcontent);
      }
    }

    li.active {
      border: calc(2px * var(--ratio)) solid var(--color-brand);
      background: rgba(51, 133, 255, 0.08);

      span {
        color: var(--color-text-primary);
      }
    }
  }

  .btn-box {
    margin-top: calc(60px * var(--ratio));

    .cancel {
      --f7-button-outline-border-color: var(--color-divider-line);
      --f7-button-text-color: var(--color-text-title);
    }
  }
}
</style>
